import React, { Component } from 'react';
import './login.less'
import { Link } from 'react-router-dom'
import { login } from './login'
import { Toast } from 'antd-mobile';
import { loginAction } from '../../store/actionCreators'
import store from '../../store';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: 'yolf888',
            password: '123456'
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleStoreChange = this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    handleStoreChange() {
        console.log(123123)
    }
    handleInputChange(e) {
        const event = e.target;
        this.setState({
            [event.name]: event.value
        })
    }
    handleSubmit(e) {
        e.preventDefault();
        login({
            ...this.state
        }).then(res => {
            console.log(res);
            Toast.success(res.message, 2, () => {
                let name = res.data.member.username;
                store.dispatch(loginAction(name));
            });
        })
    }
    render() {
        return (
            <div className="loginWrapper">
                <div className="loginLogo"></div>
                <div className="loginForm">
                    <input placeholder="请输入账号" value={this.state.username} name="username" onChange={this.handleInputChange} />
                    <input placeholder="请输入密码" type="password" value={this.state.password} name="password" onChange={this.handleInputChange} />
                    <button onClick={this.handleSubmit}>登录</button>
                    <Link to="/forget" className="forget">忘记密码？</Link>
                </div>
            </div>
        );
    }
}

export default Login;